<template>
  <div>
    <button @click="addUser">添加用户</button>
    <button @click="deleteUsers">批量删除用户</button>
    <el-table :data="tableData" border style="width: 100%"
          @selection-change="handleSelectionChange"
>
       <el-table-column type="selection" width="60"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="150">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="120">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="120"
        :formatter="sexFormatter"
      >
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="birthday" label="生日" width="300">
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="updateUser(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
      deleteUsers(){
      //遍历获取的所有每行数据
      this.idlist.forEach((user,index) => {
        //将其中的id值存入ids数组
          this.ids[index]=(user.id)
      });
      console.log(this.ids);
      this.$httpRequest.post("/user/deleteUsers",
        //将数组发送到后端批量进行删除
      this.ids    
    )
      .then((data)=>{
        // console.log(this.ids);
        console.log(data);
        this.$router.go(0);
      })
      .catch((err)=>{
        console.log(err)
      })
    },
      handleSelectionChange(val){
        this.idlist=val;
        // console.log(this.idlist);
},
    addUser() {
      this.$router.push("/toadd");
    },

    sexFormatter(row, column, cellValue, index) {
      return cellValue == 0 ? "女" : "男";
    },
    //显示所有
    findAll() {
      var app = this;
      this.$httpRequest
        .post("user/selectUserPage", {
          current: 1,
          size: 10,
        })
        .then(({ data }) => {
          app.tableData = data.page.records;
          app.current = data.page.current;
          app.total = data.page.total;
          app.size = data.page.size;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改用户
    updateUser(row) {
      this.$router.push("/toUpdateUser/" + row.id);
    },
    // 删除用户
    handleClick(row) {
      var app = this;
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$httpRequest
            .post("user/deleteUser", {
              id: row.id,
            })
            .then(() => {
              this.$message({
                showClose: true,
                type: "success",
                message: "删除成功!",
                duration: 1500,
                onClose: () => {
                  this.$router.go(0);
                },
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除",
            duration: 1500,
          });
        });
    },
    //一页显示多少条
    handleSizeChange(val) {
      var app = this;
      this.$httpRequest
        .post("user/selectUserPage", {
          current: 1,
          size: val,
        })
        .then(({ data }) => {
          app.tableData = data.page.records;
          this.size = val;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询当前页数据
    handleCurrentChange(val) {
      var app = this;

      this.$httpRequest
        .post("user/selectUserPage", {
          current: val,
          size: app.size,
        })
        .then(({ data }) => {
          app.tableData = data.page.records;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted: function () {
    this.findAll();
  },
  data() {
    return {
      tableData: [],
      total: 100,
      current: 1,
      size: 20,
      idlist:[],
      ids:[]
    };
  },
};
</script>
<style scoped>
</style>